<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <input type="text" v-model="todoValue">
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item :content="item"
                                :index="index"
                                v-for="(item, index) in list"
                                @delete="handleItemDelete">
            </todo-item>
        </ul>
    </div>
    <script>
        // todoitem抽像出来形成一个单独的组件，与父组件之前地行参数的下传与响应 下传content与index值 并监听delete事件，如果点击相应li，返回当前index给上级
        // 上级的handleItemDelete，接收参数index 并对list的值做相应处理
        Vue.component('todo-item', {
            props: ['content', 'index'],
            template: "<li @click='handleItemDelete'>{{content}}</li>",
            methods: {
                handleItemDelete: function () {
                    this.$emit("delete", this.index);
                }
            }
            })
        var app = new Vue({
            el: '#root',
            data: {
                list: [],
                todoValue: ''
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.todoValue)
                    this.todoValue = ""
                },
                handleItemDelete: function (index) {
                    alert(index)
                    // 对取得list index值的字符进行删除
                    this.list.splice(index, 1)
                }
            }
        })
    </script>
</body>

</html>